<template>
  <div style="position: relative;">
    <el-badge :value="selected.unRead" :hidden="!(selected.unRead>0)">
      <img :src="selected.imgurl" alt="" />
    </el-badge>
    <div class="info">
      <p class="group-name">{{selected.name}}</p>
      <span>下午2：49</span>
      <p class="msg">
          <span v-show="selected.unRead>=0">[{{selected.unRead}}]条</span>
          <span>{{(selected.msgs != undefined && selected.msgs.length>0 )?selected.msgs[0].content:""}}</span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "group",
  props: ["selected"],
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style scoped>
* {
  margin: 0 0;
  padding: 0 0;
}

.el-badge{
    vertical-align: top;
}

.info{
    display: inline-block;
    font-size: 12px;
    margin-left: 17px;
}

.info .group-name{
    display: inline-block;
}

.info>span{
    position: absolute;
    top:0px;
    right: 0px;
    color: #9f9f9f;
}
.info .msg{
    margin-top:5px;
    color: #9f9f9f;
}

img{
    width: 40px;
    height: 40px;
    border-radius: 5px;
}
</style>